Unidad 8 - JavaScript

8.1 Introducción

javascript frontend

JavaScript es un lenguaje de programación interpretado, ligero y orientado a eventos. Originalmente fue creado para navegadores web, pero actualmente también se utiliza en backend mediante Node.js.

Características

Lenguaje dinámicamente tipado.
Interpretado por el navegador.
Compatible con HTML y CSS.
Permite crear páginas interactivas.
Usado tanto en frontend como backend.

DHTML

DHTML combina:

HTML → estructura.
CSS → diseño visual.
JavaScript → comportamiento.
DOM → manipulación de elementos.

console.log("Hola JavaScript");

JavaScript NO es lo mismo que Java. El parecido del nombre fue una decisión de marketing.

Mini-test

1. ¿Qué permite JavaScript?

Crear sistemas operativos Añadir interactividad web Compilar programas

8.2 Modo Estricto

strict mode

El modo estricto activa una versión más segura del lenguaje. Ayuda a detectar errores y evita malas prácticas.

"use strict"; let nombre = "Carlos";

Ventajas

Evita variables accidentales.
Reduce errores silenciosos.
Mejora seguridad.
Facilita depuración.

Error típico

"use strict"; edad = 20; // ERROR

"use strict" debe colocarse al inicio del archivo o función.

Mini-test

1. ¿Qué activa el modo estricto?

"strict" "use strict" strict=true

8.3 ¿Cómo utilizar JS?

script

JavaScript puede escribirse directamente dentro del HTML o en archivos externos con extensión .js.

Script interno

Script externo

Ventajas de archivos externos

Reutilización.
Mejor mantenimiento.
Código más limpio.
Mayor rendimiento.

Nunca cierres script usando <script /> porque no es válido en muchos navegadores.

Mini-test

1. ¿Qué etiqueta se usa para JS?

code script js

8.4 Comentarios

comentarios

Los comentarios permiten documentar código y facilitar mantenimiento. El navegador ignora su contenido.

Comentario de línea

// Comentario simple

Comentario multilínea

/* Comentario multilínea */

Comentar código correctamente facilita el trabajo en equipo.

Mini-test

1. ¿Qué símbolo crea comentario de línea?

## // --

8.5 Sentencias

sentencias

Las sentencias son instrucciones que ejecuta JavaScript.

alert("Hola"); console.log("Mundo");

Punto y coma

Las sentencias pueden separarse con ;

let a = 5; let b = 10;

Buenas prácticas

Una acción por línea.
Indentación correcta.
Evitar código confuso.

Mini-test

1. ¿Qué es una sentencia?

Un comentario Una instrucción ejecutable Una etiqueta HTML

8.6 Variables

let var

Las variables almacenan datos en memoria.

let nombre = "Ana"; let edad = 20;

Características

El valor puede cambiar.
Se crean con let.
var es antiguo.

Variables múltiples

let usuario = "Juan", edad = 25, pais = "España";

Nombres válidos

let userName; let $precio; let _contador;

Nombres inválidos

let 1dato; let mi-variable;

No se puede declarar dos veces una variable usando let.

Mini-test

1. ¿Qué palabra crea variables modernas?

var let const

8.7 Constantes

const

Las constantes almacenan valores que no cambian.

const PI = 3.1416;

Error

const edad = 20; edad = 30; // ERROR

Constantes en mayúsculas

const COLOR_RED = "#FF0000";

Se usan para valores fijos.
Facilitan lectura.
Evitan errores.

Mini-test

1. ¿Qué palabra crea constantes?

let var const

8.8 Tipos de datos

datatype

JavaScript tiene múltiples tipos de datos.

Tipo	Ejemplo
number	25
string	"Hola"
boolean	true
null	null
undefined	undefined

Strings

let texto = "Hola"; let nombre = `Ana`;

Boolean

let activo = true;

typeof

typeof "Hola"; // string typeof 20; // number

JavaScript es dinámicamente tipado.

Mini-test

1. ¿Qué devuelve typeof?

Un número El tipo del dato Un boolean

8.9 Interacción: alert, prompt y confirm

interacción

alert()

alert("Hola");

prompt()

let nombre = prompt("Tu nombre:");

confirm()

let respuesta = confirm("¿Deseas continuar?");

Función	Uso
alert	Mostrar mensaje
prompt	Pedir datos
confirm	Confirmación

Estas ventanas son modales y bloquean interacción.

Mini-test

1. ¿Qué función pide datos?

alert prompt confirm

8.10 Conversión de tipos

conversion

String()

String(123); // "123"

Number()

Number("25"); // 25

Boolean()

Boolean(1); // true Boolean(0); // false

Concatenación

"Hola" + 5 // "Hola5"

Valor	Boolean
0	false
""	false
"Hola"	true

undefined convertido a número devuelve NaN.

Mini-test

1. ¿Qué devuelve Number("5")?

"5" 5 true

8.11 Operadores aritméticos

math

Operador	Uso
+	Suma
-	Resta
*	Multiplicación
/	División
%	Resto

let a = 10; let b = 3; console.log(a + b); console.log(a % b);

Incremento

let x = 5; x++;

Exponenciación

2 ** 3 // 8

El operador + concatena strings.

Mini-test

1. ¿Qué operador calcula el resto?

/ * %

8.12 Operadores de comparación

comparison

Operador	Significado
==	Igual
===	Igual estricto
!=	Diferente
>	Mayor
<	Menor

5 == "5" // true 5 === "5" // false

Comparación de strings

"Z" > "A" // true

=== compara valor Y tipo.

Mini-test

1. ¿Qué operador compara estrictamente?

== === !=

8.13 Programación estructurada (I)

if

IF

if(edad >= 18){ console.log("Mayor"); }

IF ELSE

if(nota >= 5){ console.log("Aprobado"); }else{ console.log("Suspenso"); }

Operador ternario

let acceso = edad >= 18 ? "Sí" : "No";

El ternario simplifica condiciones simples.

Mini-test

1. ¿Qué estructura ejecuta alternativas?

while if else switch

8.14 Operadores lógicos

logic

Operador	Uso
&&	AND
\|\|	OR
!	NOT

let edad = 20; let carnet = true; if(edad >= 18 && carnet){ console.log("Puede conducir"); }

Nullish coalescing

let usuario = null; let nombre = usuario ?? "Invitado";

?? no debe mezclarse con && o || sin paréntesis.

Mini-test

1. ¿Qué operador significa AND?

|| && !

8.15 Programación estructurada (II)

loops

WHILE

let i = 0; while(i < 5){ console.log(i); i++; }

DO WHILE

let n = 0; do{ console.log(n); n++; }while(n < 3);

FOR

for(let i=0; i<5; i++){ console.log(i); }

BREAK

break;

CONTINUE

continue;

SWITCH

switch(dia){ case 1: console.log("Lunes"); break; default: console.log("Otro"); }

Los bucles permiten repetir acciones automáticamente.

Mini-test

1. ¿Qué bucle garantiza al menos una ejecución?

while do while for